<template>
  <div class="video-optimizer">
    <div class="header">
      <h1>MP4文件流式播放优化工具</h1>
      <p>实现 ffmpeg -movflags +faststart 功能（纯前端，无需重新编码，秒级完成）</p>
      <div class="method-selector">
        <label>
          <input type="radio" value="advanced" v-model="optimizeMethod" :disabled="processing">
          <span class="method-label">
            <strong>mp4-muxer 方案</strong> (推荐)
            <small>- 完整索引重建，与 FFmpeg 等效</small>
          </span>
        </label>
        <label>
          <input type="radio" value="simple" v-model="optimizeMethod" :disabled="processing">
          <span class="method-label">
            <strong>简化方案</strong>
            <small>- 快速重排序，仅更新 stco</small>
          </span>
        </label>
      </div>
    </div>

    <div class="upload-section">
      <div class="file-input-wrapper">
        <input ref="fileInput" type="file" accept="video/mp4" @change="handleFileSelect" :disabled="processing">
        <button @click="$refs.fileInput.click()" :disabled="processing">
          选择MP4文件 (≤10GB)
        </button>
      </div>

      <div v-if="selectedFile" class="file-info">
        <p><strong>文件名:</strong> {{ selectedFile.name }}</p>
        <p><strong>文件大小:</strong> {{ formatFileSize(selectedFile.size) }}</p>
        <p><strong>类型:</strong> {{ selectedFile.type }}</p>

        <!-- 方案选择 -->
        <div class="method-selection">
          <h3>选择优化方案：</h3>
          <div class="radio-group">
            <label>
              <input type="radio" v-model="selectedMethod" value="auto" />
              <span>自动选择</span>
              <small>（根据文件大小自动选择最佳方案）</small>
            </label>
            <label>
              <input type="radio" v-model="selectedMethod" value="simple" />
              <span>简化方案</span>
              <small>（快速，只移动 moov atom，1-2 分钟）</small>
            </label>
            <label>
              <input type="radio" v-model="selectedMethod" value="standard" />
              <span>标准方案</span>
              <small>（完整功能，等价于 FFmpeg，支持任意大小，2-10 分钟）</small>
            </label>
            <label>
              <input type="radio" v-model="selectedMethod" value="streaming" />
              <span>流式方案 (fragmented)</span>
              <small>（完整功能 + 大文件支持，fMP4 格式，5-15 分钟）</small>
            </label>
            <label>
              <input type="radio" v-model="selectedMethod" value="large-file" />
              <span>超大文件方案</span>
              <small>（专用于 > 2GB 文件，分段处理，10-60 分钟）</small>
            </label>
          </div>
        </div>

        <!-- 智能推荐 -->
        <div v-if="selectedFile" class="recommendation-box">
          <h4>💡 智能推荐</h4>
          <div class="recommendation-content">
            <p><strong>推荐方案:</strong> {{ getMethodInfo(getRecommendedMethod(selectedFile.size).method).name }}</p>
            <p><strong>推荐理由:</strong> {{ getRecommendedMethod(selectedFile.size).reason }}</p>
            <p><strong>预计时间:</strong> {{ getRecommendedMethod(selectedFile.size).estimatedTime }}</p>
            <p><strong>内存使用:</strong> {{ getRecommendedMethod(selectedFile.size).memoryUsage }}</p>
            <button 
              @click="selectedMethod = getRecommendedMethod(selectedFile.size).method"
              class="apply-recommendation-btn"
            >
              采用推荐方案
            </button>
          </div>

        </div>

        <!-- 开始优化按钮 -->
        <div class="start-optimization">
          <button @click="optimizeVideo" :disabled="processing" class="start-btn">
            {{ processing ? '正在优化...' : '🚀 开始优化' }}
          </button>
        </div>
      </div>
    </div>

    <div v-if="processing" class="progress-section">
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
      </div>
      <p class="progress-text">{{ progressText }}</p>
    </div>

    <div v-if="error" class="error-section">
      <p class="error-message">{{ error }}</p>
    </div>

    <div v-if="optimizedFile" class="result-section">
      <h3>✓ 优化完成!</h3>

      <div class="info-box">
        <p>✓ 文件已成功优化为 faststart 格式</p>
        <p>✓ moov atom 已移至文件头部</p>
        <p>✓ 适合流媒体播放和网络分发</p>
        <p class="file-info">
          优化后文件大小: {{ formatFileSize(optimizedFile.size) }}
        </p>
      </div>

      <div class="download-section">
        <button @click="downloadOptimized" class="download-btn">
          下载优化后的文件
        </button>
        <button @click="showPreview = !showPreview" class="preview-btn">
          {{ showPreview ? '隐藏预览' : '显示预览对比' }}
        </button>
      </div>

      <div v-if="showPreview" class="comparison">
        <div class="video-container">
          <h4>原始视频</h4>
          <video :src="originalVideoUrl" controls preload="metadata"
            style="max-width: 100%; border-radius: 8px;"></video>
        </div>

        <div class="video-container">
          <h4>优化后视频</h4>
          <video :src="optimizedVideoUrl" controls preload="metadata"
            style="max-width: 100%; border-radius: 8px;"></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { optimizeMP4Advanced } from '../utils/mp4FastStartAdvanced'
import { optimizeMP4Simple } from '../utils/mp4FastStartSimple'
import { optimizeMP4Streaming } from '../utils/mp4FastStartStreaming'
import { optimizeMP4LargeFile, formatFileSize as formatLargeFileSize, estimateProcessingTime } from '../utils/mp4FastStartLargeFile'

export default {
  name: 'VideoOptimizer',
  data() {
    return {
      selectedFile: null,
      processing: false,
      progress: 0,
      progressText: '',
      error: null,
      optimizedFile: null,
      originalVideoUrl: null,
      optimizedVideoUrl: null,
      showPreview: false,
      optimizeMethod: 'advanced', // 默认使用 mp4-muxer 方案
      selectedMethod: 'auto' // 默认自动选择
    }
  },

  beforeUnmount() {
    this.cleanup()
  },

  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0]
      if (!file) return

      const maxSize = 10 * 1024 * 1024 * 1024
      if (file.size > maxSize) {
        this.error = '文件大小超过10GB限制'
        return
      }

      if (!file.type.includes('mp4')) {
        this.error = '请选择MP4格式的视频文件'
        return
      }

      // 智能推荐方案
      const recommendation = this.getRecommendedMethod(file.size)
      console.log('📊 智能推荐:', recommendation)

      this.selectedFile = file
      this.error = null
      this.optimizedFile = null
      this.showPreview = false
      this.cleanup()
    },

    async optimizeVideo() {
      if (!this.selectedFile) return

      this.processing = true
      this.progress = 0
      this.error = null

      try {
        const fileSize = this.selectedFile.size
        const fileSizeMB = (fileSize / 1024 / 1024).toFixed(2)

        console.log(`📊 开始优化文件: ${this.selectedFile.name} (${fileSizeMB} MB)`)
        console.log(`🔧 使用方案: ${this.optimizeMethod === 'advanced' ? 'mp4-muxer (完整索引重建)' : '简化方案 (仅 stco)'}`)

        // 检测浏览器兼容性
        const support = this.checkMP4Support()

        // 如果选择了 streaming 方案但浏览器不支持，给出警告
        if (this.selectedMethod === 'streaming' && !support.fragmented) {
          console.warn('⚠️ 浏览器可能不完全支持 fragmented MP4，但继续处理...')
          console.log('💡 如果播放有问题，建议使用标准方案')
        }

        // 根据选择的方案进行优化
        if (this.optimizeMethod === 'advanced') {
          await this.optimizeWithMp4Muxer()
        } else {
          await this.optimizeWithSimpleMethod()
        }

      } catch (err) {
        console.error('优化失败:', err)
        this.error = `优化失败: ${err.message}`
      } finally {
        this.processing = false
      }
    },

    async optimizeWithMp4Muxer() {
      try {
        const fileSizeGB = this.selectedFile.size / (1024 * 1024 * 1024)
        let method = this.selectedMethod

        // 如果选择自动，根据文件大小决定
        if (method === 'auto') {
          if (fileSizeGB > 1) {
            method = 'streaming'
            console.log('📊 大文件检测，自动选择流式方案')
          } else {
            method = 'standard'
            console.log('📊 小文件检测，自动选择标准方案')
          }
        }

        console.log(`📊 文件大小: ${fileSizeGB.toFixed(2)} GB`)
        console.log(`🔧 选择方案: ${method}`)

        // 根据选择的方案执行
        switch (method) {
          case 'simple': {
            console.log('🚀 使用简化方案（快速）')
            this.progressText = '正在使用简化方案优化...'

            const simpleFile = await optimizeMP4Simple(this.selectedFile, (percent, stage) => {
              this.progress = Math.round(percent)
              this.progressText = stage
              console.log(`进度: ${percent}% - ${stage}`)
            })

            this.optimizedFile = simpleFile
            break
          }

          case 'streaming': {
            console.log('🚀 使用流式方案（fragmented 模式）')
            this.progressText = '正在使用流式处理优化...'

            const streamingFile = await optimizeMP4Streaming(this.selectedFile, {
              onProgress: (percent, stage) => {
                this.progress = Math.round(percent)
                this.progressText = stage
                console.log(`进度: ${percent}% - ${stage}`)
              }
            })

            this.optimizedFile = streamingFile
            break
          }

          case 'large-file': {
            console.log('🚀 使用超大文件方案（分段处理）')
            this.progressText = '正在使用超大文件方案优化...'

            const largeFile = await optimizeMP4LargeFile(this.selectedFile, {
              onProgress: (percent, stage, details) => {
                this.progress = Math.round(percent)
                this.progressText = stage
                console.log(`进度: ${percent}% - ${stage}`)
                
                if (details) {
                  console.log('处理详情:', details)
                  if (details.memoryUsage) {
                    console.log(`内存使用: ${details.memoryUsage}`)
                  }
                }
              },
              
              onMemoryWarning: (message) => {
                console.warn('⚠️ 内存警告:', message)
                // 可以在这里显示警告给用户
                this.progressText = `${this.progressText} (${message})`
              }
            })

            this.optimizedFile = largeFile
            break
          }

          case 'standard':
          default: {
            console.log('🚀 使用标准方案')
            this.progressText = '正在使用标准方案优化...'
            
            const standardFile = await optimizeMP4Advanced(this.selectedFile, {
              onProgress: (percent, stage) => {
                this.progress = Math.round(percent)
                this.progressText = stage
                console.log(`进度: ${percent}% - ${stage}`)
              }
            })
            
            this.optimizedFile = standardFile
            break
          }
        }

        console.log('✅ 优化成功！')

        // 🎯 测试播放兼容性和性能
        if (method === 'streaming' || method === 'large-file') {
          console.log('🧪 测试播放兼容性和性能...')

          const fileSizeGB = this.selectedFile.size / (1024 * 1024 * 1024)

          // 性能提示
          if (method === 'large-file') {
            console.log('🎯 超大文件方案: 分段处理，内存优化')
            console.log('📊 预期效果: 支持任意大小文件，内存使用可控')
            console.log('⚠️  注意: 处理时间较长，建议耐心等待')
            console.log('💡 播放建议: 现代浏览器播放效果最佳')
          } else if (method === 'streaming') {
            console.log('💡 性能提示: 使用流式方案，支持大文件处理')
            if (fileSizeGB > 3) {
              console.log('⚠️  注意: 大文件使用 fragmented 模式，VLC 等播放器可能加载较慢')
              console.log('📱 建议: 使用现代浏览器播放获得最佳体验')
            }
          } else {
            console.log('💡 性能提示: 使用标准方案，最佳播放兼容性和启动速度')
          }

          const canPlay = await this.testPlayback(this.optimizedFile)

          if (!canPlay) {
            console.warn('⚠️ 播放测试失败，可能存在兼容性问题')
            this.error = '生成的文件在当前浏览器中可能无法正常播放。建议使用标准方案。'
          } else {
            console.log('✅ 播放测试通过')

            // 根据文件大小给出播放建议
            if (fileSizeGB >= 3) {
              console.log('📋 播放建议:')
              console.log('  ✅ 浏览器播放: 性能良好')
              console.log('  🐌 VLC 播放器: 可能加载较慢 (10-30秒)')
              console.log('  ✅ 现代播放器: 推荐使用')
              console.log('  💡 如需 VLC 快速播放，建议使用标准方案')
            }
          }
        }

        this.originalVideoUrl = URL.createObjectURL(this.selectedFile)
        this.optimizedVideoUrl = URL.createObjectURL(this.optimizedFile)

        this.progress = 100
        this.progressText = '优化完成！'

      } catch (err) {
        console.error('❌ mp4-muxer 优化失败:', err)

        if (err.message.includes('WebCodecs')) {
          this.error = `${err.message}\n\n建议：\n1. 使用 Chrome 94+, Edge 94+, 或 Safari 16.4+\n2. 或者切换到简化方案`
        } else if (err.message.includes('文件读取失败')) {
          this.error = `文件读取失败，可能是文件过大或内存不足\n\n建议：\n1. 尝试使用简化方案\n2. 或使用服务端处理`
        } else {
          this.error = `优化失败: ${err.message}`
        }

        throw err
      }
    },

    async optimizeWithSimpleMethod() {
      try {
        this.progressText = '正在使用简化方案优化...'

        const optimizedFile = await optimizeMP4Simple(this.selectedFile, (percent, stage) => {
          this.progress = Math.round(percent)
          this.progressText = stage
          console.log(`进度: ${percent}% - ${stage}`)
        })

        console.log('✅ 优化成功！')

        this.optimizedFile = optimizedFile
        this.originalVideoUrl = URL.createObjectURL(this.selectedFile)
        this.optimizedVideoUrl = URL.createObjectURL(this.optimizedFile)

        this.progress = 100
        this.progressText = '优化完成！'

      } catch (err) {
        console.error('❌ 简化方案优化失败:', err)
        this.error = `优化失败: ${err.message}`
        throw err
      }
    },

    downloadOptimized() {
      if (!this.optimizedFile) return

      const url = URL.createObjectURL(this.optimizedFile)
      const a = document.createElement('a')
      a.href = url
      a.download = this.selectedFile.name.replace('.mp4', '_faststart.mp4')
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
    },

    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },

    // 测试文件播放兼容性
    async testPlayback(file) {
      return new Promise((resolve) => {
        const video = document.createElement('video')
        const url = URL.createObjectURL(file)

        let resolved = false

        const cleanup = () => {
          if (!resolved) {
            resolved = true
            URL.revokeObjectURL(url)
          }
        }

        video.onloadedmetadata = () => {
          console.log('✅ 视频元数据加载成功')
          cleanup()
          resolve(true)
        }

        video.onerror = (e) => {
          console.error('❌ 视频加载失败:', e)
          cleanup()
          resolve(false)
        }

        // 设置超时
        setTimeout(() => {
          if (!resolved) {
            console.warn('⏰ 视频加载超时')
            cleanup()
            resolve(false)
          }
        }, 5000)

        video.src = url
      })
    },

    // 检测浏览器对不同 MP4 格式的支持
    checkMP4Support() {
      const video = document.createElement('video')

      const support = {
        basic: video.canPlayType('video/mp4') !== '',
        fragmented: video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') !== '',
        h264: video.canPlayType('video/mp4; codecs="avc1.42E01E"') !== '',
        aac: video.canPlayType('video/mp4; codecs="mp4a.40.2"') !== ''
      }

      console.log('🔍 浏览器 MP4 支持检测:', support)
      return support
    },

    cleanup() {
      if (this.originalVideoUrl) {
        URL.revokeObjectURL(this.originalVideoUrl)
        this.originalVideoUrl = null
      }
      if (this.optimizedVideoUrl) {
        URL.revokeObjectURL(this.optimizedVideoUrl)
        this.optimizedVideoUrl = null
      }
    },

    /**
     * 智能推荐最佳处理方案
     */
    getRecommendedMethod(fileSize) {
      const sizeGB = fileSize / (1024 * 1024 * 1024)
      const sizeMB = fileSize / (1024 * 1024)
      
      let recommended = 'standard'
      let reason = ''
      let estimatedTime = ''
      let memoryUsage = ''
      
      if (sizeMB < 100) {
        recommended = 'simple'
        reason = '小文件，快速处理'
        estimatedTime = '1-2 分钟'
        memoryUsage = '< 50MB'
      } else if (sizeGB < 2) {
        recommended = 'standard'
        reason = '标准方案，最佳性能和兼容性'
        estimatedTime = '2-10 分钟'
        memoryUsage = '< 500MB'
      } else if (sizeGB < 5) {
        recommended = 'streaming'
        reason = '大文件，流式处理'
        estimatedTime = '5-15 分钟'
        memoryUsage = '200-400MB'
      } else {
        recommended = 'large-file'
        reason = '超大文件，分段处理确保稳定性'
        estimatedTime = estimateProcessingTime(fileSize)
        memoryUsage = '< 800MB'
      }
      
      return {
        method: recommended,
        reason,
        estimatedTime,
        memoryUsage,
        fileSize: formatLargeFileSize(fileSize)
      }
    },

    /**
     * 获取方案详细信息
     */
    getMethodInfo(method) {
      const info = {
        'simple': {
          name: '简化方案',
          description: '快速移动 moov atom',
          pros: ['处理速度最快', '内存使用最少', '兼容性最好'],
          cons: ['功能相对简单', '优化程度有限'],
          suitable: '< 500MB 文件'
        },
        'standard': {
          name: '标准方案',
          description: '完整索引重建，等价于 FFmpeg',
          pros: ['最佳播放性能', '完美兼容性', 'VLC 1-3秒启动'],
          cons: ['大文件处理时间较长'],
          suitable: '任意大小文件'
        },
        'streaming': {
          name: '流式方案',
          description: 'fragmented MP4，支持大文件',
          pros: ['支持大文件', '内存使用可控', '现代播放器友好'],
          cons: ['VLC 启动较慢', '兼容性 90%'],
          suitable: '1-5GB 文件'
        },
        'large-file': {
          name: '超大文件方案',
          description: '分段处理，专为超大文件设计',
          pros: ['支持任意大小', '内存安全', '处理稳定'],
          cons: ['处理时间长', '复杂度高'],
          suitable: '> 2GB 文件'
        }
      }
      
      return info[method] || info['standard']
    }
  }
}
</script>

<style scoped>
.video-optimizer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.header p {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 20px;
}

.method-selector {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.method-selector label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 6px;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.method-selector label:hover {
  background: #e9ecef;
}

.method-selector input[type="radio"]:checked+.method-label {
  font-weight: 600;
}

.method-selector label:has(input:checked) {
  background: #e3f2fd;
  border-color: #2196f3;
}

.method-selector input[type="radio"] {
  margin-right: 10px;
  cursor: pointer;
}

.method-label {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.method-label strong {
  color: #2c3e50;
  margin-bottom: 4px;
}

.method-label small {
  color: #7f8c8d;
  font-size: 12px;
}

.upload-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.file-input-wrapper input[type="file"] {
  display: none;
}

.file-input-wrapper button {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.file-input-wrapper button:hover:not(:disabled) {
  background: #2980b9;
}

.file-input-wrapper button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.file-info {
  margin-top: 20px;
  text-align: left;
  background: white;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.method-selection {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
}

.method-selection h3 {
  margin-bottom: 10px;
  color: #495057;
  font-size: 16px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.radio-group label:hover {
  background-color: #e9ecef;
}

.radio-group input[type="radio"] {
  margin-top: 2px;
}

.radio-group span {
  font-weight: 500;
  color: #495057;
}

.radio-group small {
  display: block;
  color: #6c757d;
  font-size: 12px;
  margin-top: 2px;
}

.start-optimization {
  margin-top: 20px;
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
}

/* 智能推荐样式 */
.recommendation-box {
  margin-top: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.recommendation-box h4 {
  margin: 0 0 10px 0;
  color: #495057;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.recommendation-content {
  font-size: 13px;
  line-height: 1.4;
}

.recommendation-content p {
  margin: 5px 0;
  color: #6c757d;
}

.recommendation-content strong {
  color: #495057;
}

.apply-recommendation-btn {
  background: #17a2b8;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 8px;
  transition: background 0.3s;
}

.apply-recommendation-btn:hover {
  background: #138496;
}

.start-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.start-btn:hover:not(:disabled) {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.start-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.progress-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  color: #2c3e50;
  font-weight: 500;
}

.error-section {
  background: #ffe6e6;
  border: 1px solid #ff9999;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.error-message {
  color: #cc0000;
  margin: 0;
  white-space: pre-line;
}

.result-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
}

.result-section h3 {
  color: #27ae60;
  text-align: center;
  margin-bottom: 20px;
}

.info-box {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-box p {
  margin: 8px 0;
  color: #2e7d32;
}

.download-section {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ecf0f1;
}

.download-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
  margin-right: 10px;
}

.download-btn:hover {
  background: #c0392b;
}

.preview-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.preview-btn:hover {
  background: #2980b9;
}

.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
}

.video-container {
  text-align: center;
}

.video-container h4 {
  color: #2c3e50;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .comparison {
    grid-template-columns: 1fr;
  }

  .video-optimizer {
    padding: 10px;
  }

  .method-selector {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
